<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片 -->
        <el-card>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-input placeholder="请输入内容" class="input-with-select" v-model="goodsObj.query" clearable @clear='getGoodsList()'>
                    <el-button slot="append" icon="el-icon-search" @click="getGoodsList()"></el-button>
                </el-input> 
              </el-col>
              <el-col :span="4">
                    <el-button type="primary" @click="addGoodsPage">添加商品</el-button>
              </el-col>
            </el-row>
            <!-- 商品列表表格 -->
            <el-table :data="goodsList" border style="width: 100%" stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column prop="goods_name" label="商品名称" width="600"></el-table-column>
                <el-table-column prop="goods_price" label="商品价格(元)"></el-table-column>
                <el-table-column prop="goods_number" label="商品数量"></el-table-column>
                <el-table-column prop="goods_weight" label="商品重量"></el-table-column>
                <el-table-column prop="add_time" label="创建时间">
                    <template slot-scope="scope">
                        {{scope.row.add_time | dataFormat}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="revGoods(scope.row.goods_id)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="delGoods(scope.row.goods_id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="goodsObj.pagenum"
            :page-sizes="[3, 5, 10, 15]"
            :page-size="goodsObj.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </el-card>
        <!-- 编辑对话框 -->
        <el-dialog
        title="编辑"
        :visible.sync="revShowDialog"
        width="50%">
        <el-form :model="revGoodsForm" :rules="revGoodsFormRules" ref="revGoodsFormRef" label-width="100px">
        <el-form-item label="商品名称 : " prop="goods_name">
            <el-input v-model="revGoodsForm.goods_name"></el-input>
        </el-form-item>
        <el-form-item label="商品价格 : " prop="goods_price">
            <el-input v-model="revGoodsForm.goods_price"></el-input>
        </el-form-item>
        <el-form-item label="商品数量 : " prop="goods_number">
            <el-input v-model="revGoodsForm.goods_number"></el-input>
        </el-form-item>
        <el-form-item label="商品重量 : " prop="goods_weight">
            <el-input v-model="revGoodsForm.goods_weight"></el-input>
        </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="revShowDialog = false">取 消</el-button>
            <el-button type="primary" @click="revOk">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data () {
       return {
          //默认获取状态
          goodsObj:{
             query:'',
             pagenum:1,
             pagesize:10
          },
          //商品列表表格数据
          goodsList:[],
          //商品列表总条数
          total:0,
          //编辑对话框默认状态
          revShowDialog:false,
          //编辑每一行的数据
          revGoodsForm:{},
          //编辑商品效验规则
          revGoodsFormRules:{
                goods_name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 2, message: '长度在最少2个字符', trigger: 'blur' }
                ], 
          goods_price: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ], 
          goods_weight: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
                ]             
          }
       }
    },
    created () {
       this.getGoodsList()
    },
    methods:{
       async getGoodsList () {
            const res = await this.$http.get('goods',{params:this.goodsObj})
            if(res.data.meta.status = 200){
                this.goodsList = res.data.data.goods
                this.total = res.data.data.total
                console.log(this.goodsList)
            }else{
                return this.$message.error('获取商品列表失败');
            }
        },
        //每页条数发生改变触发
        handleSizeChange  (newPagesize) { 
           this.goodsObj.pagesize = newPagesize
           this.getGoodsList()
        },
        //当前页码发生改变触发
        handleCurrentChange (newPagenum) {
           this.goodsObj.pagenum = newPagenum
           this.getGoodsList()
        },
        //点击删除按钮
       async delGoods (id) {
           const confirm = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).catch(err=>err)
            if(confirm == 'cancel'){
               return this.$message.info('取消删除');
            }else{
                const res = await this.$http.delete('goods/'+id)
                if(res.data.meta.status == 200){
                  this.$message.success('删除成功');
                  this.getGoodsList()
                }
            }
        },
        //点击编辑按钮获取当前行的数据
       async revGoods (id) {
          const res = await this.$http.get('goods/'+id)
          console.log(res)
           if(res.data.meta.status == 200){
              this.revGoodsForm = res.data.data
              console.log(this.revGoodsForm.goods_cat)
           }
         this.revShowDialog = true
        },
        //点击确认修改按钮
        revOk () {
           this.$refs.revGoodsFormRef.validate(async valid=>{
               if(!valid){
                 return
               }else{
                   const res = await this.$http.put('goods/'+this.revGoodsForm.goods_id,{
                       goods_name:this.revGoodsForm.goods_name,
                       goods_price:this.revGoodsForm.goods_price,
                       goods_number:this.revGoodsForm.goods_number,
                       goods_weight:this.revGoodsForm.goods_weight,
                       goods_cat:this.revGoodsForm.goods_cat
                   })
                   if(res.data.meta.status == 200){
                       this.$message.success('修改成功')
                       this.getGoodsList()
                       this.revShowDialog = false
                   }else{
                       return this.$message.error('修改失败');
                   }
               }
           })
        },
        addGoodsPage () {
            this.$router.push('/goods/add')
        }
    }
}
</script>

<style lang="less" scoped>

</style>